[inject colar.xd]
[set-doc-lang czech]
[add-to-head
  [<link> rel="icon"; href="favicon.svg"]
]
[style
  [var serif; Constantia,"Lucida Bright",Lucidabright,"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,serif]
  [var sans-serif; -apple-system,BlinkMacSystemFont,"Avenir Next",Avenir,"Nimbus Sans L",Roboto,Noto,"Segoe UI",Arial,Helvetica,"Helvetica Neue",sans-serif]
  [var bg-accent; [Blue-12]]
  [var fg-accent; [Yellow-7]]
  [rule a;
    [: color; [var fg-accent]]
  ]
  [rule body;
    [: accent-color; [var fg-accent]]
    [: background; #000]
    [: color-scheme; dark]
    [: color; #fff]
    [: font-family; [var sans-serif]]
    [: line-height; 1.4]
    [: margin; auto]
    [: max-width; 800px]
  ]
  [rule button,a.button;
    [: background; [var bg-accent]]
    [: border; none]
    [: border-radius; .2rem]
    [: color; inherit]
    [: cursor; pointer]
    [: font-weight; 600]
    [: padding; .5rem]
    [: text-decoration; none]
  ]
  [rule h1;
    [: text-align; center]
  ]
  [rule [h*];
    [: color; [var fg-accent]]
    [: margin-block-end; 0]
  ]
  [rule input,select,textarea,.radios;
    [: background; inherit]
    [: border; .15rem solid [var bg-accent]]
    [: border-radius; 0 .2rem .2rem .2rem]
    [: color; inherit]
    [: margin; 0]
    [: outline; none]
  ]
  [rule nav;
    [: background; [var bg-accent]]
    [: display; flex]
    [: flex-flow; row wrap]
    [: font-size; 1rem]
    [: font-weight; bold]
    [: gap; 2rem]
    [: padding; .5rem]
  ]
  [rule nav a;
    [: color; inherit]
    [: text-decoration; none]
  ]
  [rule strong;
    [: color; [var fg-accent]]
  ]
  [rule summary;
    [: width; fit-content]
    [: cursor; pointer]
  ]
  [rule .error;
    [: background; [Red-12]]
    [: border; .2rem solid [Red-12]]
    [: border-radius; .2rem]
    [: margin-block-start; .5rem]
    [: padding; .4rem]
  ]
  [rule .labeled-input>label;
    [: background; [var bg-accent]]
    [: border-radius; .2rem .2rem 0 0]
    [: display; block]
    [: font-size; .7rem]
    [: padding; .2rem .2rem 0 .2rem]
    [: text-transform; uppercase]
    [: width; fit-content]
  ]
  [rule .textarea-with-buttons;
    [: display; flex]
    [: flex-flow; row nowrap]
    [: gap; .2rem]
  ]
  [rule .textarea-with-buttons>.awesomplete;
    [: width; 100%]
  ]
  [rule .textarea-with-buttons textarea;
    [: border-radius; 0 .2rem .2rem 0]
    [: height; 4.2rem]
    [: width; 100%]
    [: resize; none]
    [: box-sizing; border-box]
  ]
  [rule .character-buttons;
    [: display; grid]
    [: grid-template-columns; auto auto auto auto]
    [: gap; .2rem]
  ]
  [rule .character-buttons>button;
    [: padding; 0]
    [: width; 1.6rem]
    [: height; 2rem]
  ]
  [rule .labeled-input:focus-within;
    [var bg-accent; [var fg-accent]]
  ]
  [rule .labeled-input:focus-within>label,.labeled-input:focus-within button;
    [: color; #000]
  ]
  [rule .list-options;
    [: display; flex]
    [: flex-flow; row wrap]
    [: align-items; flex-end]
    [: gap; .3rem]
  ]
  [rule .id;
    [: font-weight; bold]
    [: color; [Gray-6]]
  ]
  [rule .author;
    [: font-weight; bold]
    [: font-style; normal]
  ]
  [rule .text;
    [: font-family; [var serif]]
  ]
  [rule .text::before,.text::after;
    [: content; ""]
  ]
  [rule .context;
    [: font-family; [var serif]]
    [: font-style; italic]
  ]
  [rule .datetime,.writer;
    [: color; [Gray-6]]
  ]
  [rule .english;
    [: color; [Gray-4]]
  ]
  [rule .name,.bracket,.the-author;
    [: font-family; [var sans-serif]]
    [: font-weight; bold]
  ]
  [rule .bracket;
    [: color; [Gray-4]]
  ]
  [rule .the-author;
    [: color; [Red-8]]
  ]
]
[<header>
  [title Hlášky]
  [<nav>
    [link Seznam; ./]
    [link Statistika; ./stats.py]
    [link O Hláškách; ./about.html]
    [link Hláškotest; ./hlaskotest.py]
  ]
]
[js-module-raw
  let l="";window.math=()=>{let m=import("./matext.min.js");let t=prompt("Zadejte matematiku v LaTeX z\xe1pisu",l);return t?m.then(({default:r})=>r(l=t,{oneLine:true})):new Promise((y,n)=>n("Input cancelled"))};window.ins=(i,c)=>{let t=document.getElementById(i);t.setRangeText(c,t.selectionStart,t.selectionEnd,"end");t.focus()}
]
[def-global character-button; id char;
  [<button> type="button"; tabindex="-1"; onclick="ins('[arg id]','[arg char]')"; [arg char]]
]
[def-global labeled-textarea; label name class value;
  [<div> .labeled-input;
    [<label> for="[arg name]"; [arg label]]
    [<div> .textarea-with-buttons; [<textarea> #[arg name]; name="[arg name]"; .[arg class]; [arg value]]
      [<div> .character-buttons;
        [character-button [arg name]; –]
        [character-button [arg name]; —]
        [character-button [arg name]; …]
        [<button> type="button"; tabindex="-1"; onclick="math().then(m=>ins('[arg name]',m)).catch(()=>{})"; ∑]
        [character-button [arg name]; „]
        [character-button [arg name]; “]
        [character-button [arg name]; ”]
      ]
    ]
  ]
]
